<!-- 头部面包屑 
    通过emit传递了一个isCollapse属性给父组件
 -->
<template>
    <div class="header">
        <div class="header-left">
            <a href="javascript:void(0)" @click="isCollapse=!isCollapse" :title="isCollapse?'展开':'折叠'"
                :style="[isCollapse?'transform:rotate(-180deg)':'transform:rotate(0deg)']">
                <el-icon color="#6b7580" :size="30">
                    <Fold />
                </el-icon>
            </a>
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/index/dashboard' }">{{$t("home")}}</el-breadcrumb-item>
                <template v-for="item in $route.matched.slice(1)" :key="item.name">
                    <template v-if="item.name!='Dashboard'">
                        <el-breadcrumb-item>{{$t(item.meta.title as string)}}</el-breadcrumb-item>
                    </template>
                </template>
            </el-breadcrumb>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { ArrowRight, Fold } from '@element-plus/icons-vue'

const isCollapse = ref(false)
const emit = defineEmits<{ (e: 'changeCollapse', isCollapse: boolean): void }>();
//   emit('changeCollapse',isCollapse)
//菜单是否折叠
watch(isCollapse, (isCollapse) => {
    emit('changeCollapse', isCollapse)
})

</script>
<style scoped lang="less">
.header-left {
    display: flex;
    padding-left: 20px;

    a {
        display: flex;
        align-items: center;
        transition: all 0.2s ease-out;
    }

    .el-breadcrumb {
        display: flex;
        align-items: center;
        margin-left: 20px;
    }
}
</style>